<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-wrap align-center justify-between benben-position-layout flex order_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center order_fd0_0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
        </view>
        <view class='flex flex-wrap align-center justify-between order_fd0_1'>
          <view class="order_fd0_1_c0">
            <text class='order_fd0_1_c0' :class="tabId==3 ? 'active' : ''" @click.stop="chooseTab('3')">租赁订单</text>
            <view v-if="tabId==3" class="line"></view>
          </view>
          <view class="order_fd0_1_c0">
            <text class='order_fd0_1_c0' :class="tabId==6 ? 'active' : ''" @click.stop="chooseTab('6')">试用订单</text>
            <view v-if="tabId==6" class="line"></view>
          </view>


        </view>
        <view class='flex flex-wrap align-center order_fd0_0'>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---多商订单tabsflex布局开始-->
      <view class="flex align-stretch benben-flex-layout">
        <view>
          <benben-flex-tabs class-name='order_benbenTabsfd1_0' v-model="type" ref="benben_tabsfd1_0"
            select-mark="benben_tabsfd1_0" key="benben_tabsfd1_0" :open-title-type='false' :open-sticky='false'
            :top='88' :is-show-content='false' :scrollspy='false' :tabs-info.sync="tabsInfofd1_0"
            @change="getOrderListFunc()">

            <scroll-view @scroll="tabsInfofd1_0.scrollX = $event.detail.scrollLeft" id="benben_tabsfd1_0"
              class="benben-tabs" style="width:750rpx" :scroll-x="true" :scroll-left.sync="tabsInfofd1_0.moveX"
              scroll-with-animation="all .3s ease">
              <view class="benben-tabs-content" id="benben_tabsfd1_0-content">
                <view id="benben_tabsfd1_0-title" class="benben-tabs-title flex align-center flex ">
                  <view
                    :class="{ 'checkTitlefd1_0': type == 'all', 'flex flex-wrap align-center order_titlefd1_0_c3': true }"
                    @tap="type = 'all'" :id="`benben_tabsfd1_0-title-item-${'all'}`">

                    <text>{{$t('全部')}}</text>

                  </view>
                  <view
                    :class="{ 'checkTitlefd1_0': type == 'unpay', 'flex flex-wrap align-center order_titlefd1_0_c4': true }"
                    @tap="type = 'unpay'" :id="`benben_tabsfd1_0-title-item-${'unpay'}`">

                    <text>{{$t('待付款')}}</text>

                  </view>
                  <view
                    :class="{ 'checkTitlefd1_0': type == 'unship', 'flex flex-wrap align-center order_titlefd1_0_c4': true }"
                    @tap="type = 'unship'" :id="`benben_tabsfd1_0-title-item-${'unship'}`">

                    <text>{{$t('待发货')}}</text>

                  </view>
                  <view
                    :class="{ 'checkTitlefd1_0': type == 'unreceive', 'flex flex-wrap align-center order_titlefd1_0_c4': true }"
                    @tap="type = 'unreceive'" :id="`benben_tabsfd1_0-title-item-${'unreceive'}`">

                    <text>{{$t('待收货')}}</text>

                  </view>
                  <view
                    :class="{ 'checkTitlefd1_0': type == 'unfinish', 'flex flex-wrap align-center order_titlefd1_0_c4': true }"
                    @tap="type = 'unfinish'" :id="`benben_tabsfd1_0-title-item-${'unfinish'}`">

                    <text>租赁中</text>

                  </view>
                  <view
                    :class="{ 'checkTitlefd1_0': type == 'back', 'flex flex-wrap align-center order_titlefd1_0_c4': true }"
                    @tap="type = 'back'" :id="`benben_tabsfd1_0-title-item-${'back'}`">

                    <text>寄回中</text>

                  </view>
                  <view
                    :class="{ 'checkTitlefd1_0': type == 'evaluate', 'flex flex-wrap align-center order_titlefd1_0_c8': true }"
                    @tap="type = 'evaluate'" :id="`benben_tabsfd1_0-title-item-${'evaluate'}`">

                    <text>已完成</text>

                  </view>
                </view>
                <view :style="{ left: tabsInfofd1_0.lineleft, maxWidth: tabsInfofd1_0.lineWidth ,}"
                  id="benben_tabsfd1_0-line" class="benben-tabs-line flex benben-flex-tabs-line order_linefd1_0"></view>
              </view>
            </scroll-view>

          </benben-flex-tabs>

        </view>
      </view>

      <!---多商订单tabsflex布局结束-->
      <!---多商订单商品flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout order_flex_2" v-if="type!='6'">
        <template v-for='(item,key0) in dataList'>
          <view class='flex flex-direction flex-wrap align-stretch order_fd2_0' @tap.stop="handleJumpDiy"
            data-type="navigateTo"
            :data-url="`/pages/ddgl/redemptDetails/redemptDetails?order_id=${item.aid}&order_sn=${item.order_sn}`"
            :key='key0'>
            <view class='flex flex-wrap align-center order_fd2_0_c0'>
              <text class='order_fd2_0_c0_c0'>{{$t('订单编号：')}}</text>
              <text class='order_fd2_0_c0_c1'>{{item.order_sn}}</text>
              <text class='order_fd2_0_c0_c2' v-if="item.status=='0'">{{$t('待付款')}}</text><text
                class='order_fd2_0_c0_c2_1' v-if="item.status=='1'">{{$t('待发货')}}</text><text
                class='order_fd2_0_c0_c2_1' v-if="item.status=='2'">{{$t('待收货')}}</text><text
                class='order_fd2_0_c0_c2_1' v-if="item.status=='3'">{{$t('租赁中')}}</text><text
                class='order_fd2_0_c0_c2_1' v-if="item.status=='4'">{{$t('已寄回')}}</text><text
                class='order_fd2_0_c0_c2_1' v-if="in_array(item.status,'6,-1,-2,-3')">{{$t('交易关闭')}}</text><text
                class='order_fd2_0_c0_c2_1' v-if="item.status=='7'">{{$t('预售待付尾款')}}</text>
              <text class='order_fd2_0_c0_c2_1' v-if="item.status=='5'">已完成</text>
            </view>
            <template v-for='(child,key1) in item.goods'>
              <view class='flex align-stretch order_fd2_0_c1' :key='key1'>
                <image class='order_fd2_0_c1_c0' mode="aspectFill" :src='child.goods_thumb'></image>
                <view class='flex flex-direction flex-wrap align-stretch flex-sub order_fd2_0_c1_c1'>
                  <text class='order_fd2_0_c1_c1_c0'>{{child.goods_name}}</text>
                  <text class='order_fd2_0_c1_c1_c1' v-if="child.label_name">{{child.label_name }}</text>
                  <view class='flex flex-wrap align-center justify-between'>
                    <view class='flex flex-wrap align-center order_fd2_0_c1_c1_c2_c0'>
                      <text class='order_fd2_0_c1_c1_c2_c0_c0'>{{$t('¥')}}</text>
                      <text class=' order_fd2_0_c1_c1_c2_c0_c1'>
                        <text class=' order_price1_fd2_0_c1_c1_c2_c0_c1'>{{ child.shop_price | frontPrice }}</text>
                        <text class=' order_price2_fd2_0_c1_c1_c2_c0_c1'>{{ child.shop_price | laterPrice }}</text>
                      </text>
                    </view>
                    <view class='flex flex-wrap align-center'>
                      <text class='order_fd2_0_c1_c1_c2_c1_c0'>x</text>
                      <text class='order_fd2_0_c1_c1_c2_c1_c0'>{{child.num}}</text>
                    </view>
                  </view>
                </view>
              </view>
            </template>

            <view class='flex flex-wrap align-center justify-end order_fd2_0_c2'>
              <text class='order_fd2_0_c2_c0' v-if="item.order_type==4">剩余延长次数：{{item.delay_times}}次</text>
              <text class='order_fd2_0_c2_c1'>{{$t('共')}}</text>
              <text class='order_fd2_0_c2_c1'>{{item.goods_total}}</text>
              <text class='order_fd2_0_c2_c3'>{{$t('件商品')}}</text>
              <text class='order_fd2_0_c2_c4' v-if=" item.status==0 || item.status=='-1'">{{$t('应付款')}}</text><text
                class='order_fd2_0_c2_c4' v-if=" item.status!=0 && item.status!='-1' && item.order_type==3">实付款</text>
              <text class='order_fd2_0_c1_c1_c2_c0_c0' v-if=" item.order_type ==3">{{$t('¥')}}</text>
              <text class=' order_fd2_0_c1_c1_c2_c0_c1' v-if=" item.order_type ==3">
                <text class=' order_price1_fd2_0_c1_c1_c2_c0_c1'>{{ item.payable_money | frontPrice }}</text>
                <text class=' order_price2_fd2_0_c1_c1_c2_c0_c1'>{{ item.payable_money | laterPrice }}</text>
              </text>
            </view>
            <view class="flex align-center justify-between">
              <view class="text-df text-weight-600" style="color:#b50e0e">
                {{tabId==3 ? '租赁日期' : '试用日期'}}:{{item.lease_end_time}}
              </view>
              <view class='flex flex-wrap align-center justify-end order_fd2_0_c3'>
                <button class='order_fd2_0_c3_c0' v-if="item.order_type ==6&& item.status==3"
                  @tap.stop="isdelay(item.aid)">延长使用</button>

                <button class='order_fd2_0_c3_c1' @tap.stop="isMultiplePackagesFunc(item.is_multiple_package,item.aid)"
                  v-if="item.btn_list.view_logistics=='1'">{{$t('查看物流')}}</button><button class='order_fd2_0_c3_c1'
                  @tap.stop="dltOrderFunc(item.aid)"
                  v-if="item.btn_list.delete_order=='1' && item.status!=4">{{$t('删除订单')}}</button>
                <button class='order_fd2_0_c3_c1' @tap.stop="getCancelIDFunc(item.aid)"
                  v-if="item.btn_list.cancel_order=='1'">{{$t('取消订单')}}</button>
                <button class='order_fd2_0_c3_c3' @tap.stop="handleJumpDiy" data-type="navigateTo"
                  :data-url="`/pages/sy/offerPay/offerPay?order_sn=${item.order_sn}&order_type=3`"
                  v-if="item.btn_list.go_pay=='1'">{{$t('去付款')}}</button><button class='order_fd2_0_c3_c3'
                  @tap.stop="remindShipFunc(item.aid)"
                  v-if="item.btn_list.remind_send=='1'">{{$t('提醒发货')}}</button><button class='order_fd2_0_c3_c3'
                  @tap.stop="confirmReceiptFunc(item.aid)"
                  v-if="item.btn_list.confirm_receive=='1'">{{$t('确认收货')}}</button><button class='order_fd2_0_c3_c3'
                  v-if="item.btn_list.remind_already=='1'">{{$t('已提醒')}}</button>
                <button class='order_fd2_0_c3_c3' v-if="item.status==3 " @tap.stop="handleJumpDiy"
                  data-type="navigateTo"
                  :data-url="`/pages/ddgl/Immediatereturn/Immediatereturn?order_sn=${item.order_sn}&order_id=${item.aid}`">{{$t('立即归还')}}</button>
              </view>
            </view>

          </view>
        </template>
        <fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
          :listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>
      </view>

      <!---多商订单商品flex布局结束-->
      <benben-popup v-model="popupShow1679903057541" :mask="true" :mask-close-able="true" mode='bottom'>
        <!---取消订单flex布局开始-->
        <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout order_flex_3">
          <view class='flex flex-direction flex-wrap align-stretch order_fd3_0'>
            <view class='flex flex-wrap align-center justify-between order_fd3_0_c0'>
              <text class='order_fd3_0_c0_c0' @tap.stop="popupShow1679903057541=false">{{$t('取消')}}</text>
              <text class='order_fd3_0_c0_c1'>{{$t('取消订单')}}</text>
              <text class='order_fd3_0_c0_c2' @tap.stop="confirmationPopupFunc()">{{$t('确定')}}</text>
            </view>
            <view class='flex flex-wrap align-center order_fd3_0_c1'>
              <text class='order_fd3_0_c1_c0'>{{$t('请选择取消订单原因')}}</text>
            </view>

            <scroll-view class='order_fd3_0_c2' :scroll-y='true'>
              <view class='flex flex-direction align-stretch benben-scroll flex'>
                <benben-select-diy ref="showSelectPopup1693558148529" class-name='flex flex-direction flex'
                  :items.sync="cancelType" v-model="return_id" default-type="aid" default-label="reason"
                  :allow-cancel='true' type="radio" :disabled='false'>
                  <template v-for='(item,key0) in cancelType'>
                    <view v-if="item.isSelected" class='flex justify-between flex order_fd3_0_c2_c0_c0' :key="key0"
                      @tap="$refs.showSelectPopup1693558148529.tapHandle(key0)">
                      <text>{{item.reason}}</text>
                      <image class='order_fd3_0_c2_c0_c0_c1' mode="aspectFit" :src='STATIC_URL+"3.png"'></image>
                    </view>
                    <view v-else class='flex justify-between flex order_fd3_0_c2_c0_c0' :key="key0"
                      @tap="$refs.showSelectPopup1693558148529.tapHandle(key0)">
                      <text>{{item.reason}}</text>
                      <image class='order_fd3_0_c2_c0_c0_c1' mode="aspectFit" :src='STATIC_URL+"289.png"'></image>
                    </view>
                  </template></benben-select-diy>
              </view>
            </scroll-view>

          </view>
        </view>

        <!---取消订单flex布局结束-->

      </benben-popup>
      <benben-popup v-model="popupShow1708479067655" :mask="true" :mask-close-able="true" mode='center' :z-index='999'>
        <!---清除本地缓存flex布局开始-->
        <view class="flex benben-flex-layout flex-wrap align-center">
          <view class='flex flex-direction flex-wrap align-center order_fd4_0'>
            <text class='order_fd4_0_c0'>提示</text>
            <text class='order_fd4_0_c1'>请确认是否删除订单？</text>
            <view class='flex align-center order_fd4_0_c2'>
              <button class='order_fd4_0_c2_c0' @tap.stop="popupShow1708479067655=false">取消</button>
              <button class='order_fd4_0_c2_c1' @tap.stop="deleteOrderFunc()">确认</button>
            </view>
          </view>
        </view>

        <!---清除本地缓存flex布局结束-->

      </benben-popup>
      <benben-popup v-model="popupShow1710992928520" :mask="true" :mask-close-able="true" mode='center' :z-index='999'>
        <!---下线理由flex布局开始-->
        <view class="flex benben-flex-layout flex-wrap align-center">
          <view class='flex flex-direction flex-wrap align-stretch order_fd5_0'>
            <text class='order_fd5_0_c0'>提示</text>
            <text class='order_fd5_0_c1'>确认取消订单吗？</text>
            <view class='flex align-center order_fd5_0_c2'>
              <button class='order_fd5_0_c2_c0' @tap.stop="popupShow1710992928520=false">取消</button>
              <button class='order_fd5_0_c2_c1' @tap.stop="cancelOrderFunc()">确认</button>
            </view>
          </view>
        </view>

        <!---下线理由flex布局结束-->

      </benben-popup>
      <benben-popup v-model="popupShow1714103974917" :mask="true" :mask-close-able="false" mode='center' :z-index='999'>
        <!---删除弹窗flex布局开始-->
        <view class="flex flex-direction flex-wrap align-center order_flex_6">
          <text class='order_fd6_0'>提示</text>
          <text class='order_fd6_1'>每点击一次延长试用，就增加一天的试用时间，确认延长试用吗？</text>
          <view class='flex flex-wrap align-center order_fd6_2'>
            <button class='order_fd6_2_c0' @click.stop="popupShow1714103974917=false">取消</button>
            <button class='order_fd6_2_c1' @click.stop="orderdelay">确认</button>
          </view>
        </view>

        <!---删除弹窗flex布局结束-->

      </benben-popup>


    </view>
  </view>
</template>
<script>
  import pagingList from '@/common/mixin/paging_list.js';
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},
    mixins: [pagingList],

    data() {
      return {
        "popupShow1714103974917": false,
        "popupShow1710992928520": false,
        "popupShow1708479067655": false,
        "popupShow1679903057541": false,
        "tabsInfofd1_0": {
          lineleft: '',
          lineWidth: '',
          moveX: 0,
          scrollX: 0,
          PageScrollX: 0
        },
        "minixPagingListsApi": "",
        "pageingListApiMethod": "",
        "allowOnloadGetList": false,
        "dataList": [],
        "cancelId": "",
        "cancelType": [],
        "dataAfterList": [],
        "invoiceData": [],
        "invoice_id": "",
        "invoice_order_id": "",
        "return_id": "",
        "dltOrderId": "",
        "refundId": "",
        "delete_id": "",
        "RefundDeleteID": "",
        "type": "all",
        tabId: '3',
        delay: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      let {
        type
      } = options
      if (type !== undefined) this.type = type
      // this.getOrderListFunc()
      this.queryCancelTypeFunc()
      this.diyPageListen()
    },
    onUnload() {
      this.diyOffPageListen()
    },
    onReady() {

    },
    onShow() {
      this.getOrderListFunc()
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      // 试用6  租赁 3
      chooseTab(type) {
        this.tabId = type
        this.getOrderListFunc()
      },
      //订单-删除订单
      async deleteOrderFunc() {
        this.popupShow1708479067655 = false;
        //请求方法
        //数据验证

        let data6447c3b69f234 = await this.$api.dbGet(global.apiUrls.post6447c3b69f234, {
          order_id: this.dltOrderId
        });
        if (!data6447c3b69f234) return
        if (data6447c3b69f234.data.code != 1) {
          this.$message.info(data6447c3b69f234.data.msg);
          return
        }



        this.getOrderListFunc()
        uni.showToast({
          title: global.i18n.t('删除成功'),
          mask: true,
          icon: 'none',
          duration: 1500
        });
      },
      //预下单-查询发票抬头
      async queryHeadFunc() {
        //请求方法
        //数据验证

        let datainvoiceData = await this.$api.post(global.apiUrls.post641848d371e2f, {

        });

        if (datainvoiceData.data.code != 1) {
          this.$message.info(datainvoiceData.data.msg);
          return
        }
        let infoinvoiceData = datainvoiceData.data;
        this.invoiceData = infoinvoiceData.data

      },
      //获取发票订单id
      getinvoice_order_idFunc(id) {
        this.invoice_order_id = id;
        this.popupShow1679650134928 = true;
      },
      //使用发票
      async isokfapiaoFunc() {
        //请求方法
        //数据验证

        let data641ebe3244065 = await this.$api.dbPost(global.apiUrls.post641ebe3244065, {
          order_id: this.invoice_order_id,
          invoice_header_id: this.invoice_id
        });
        if (!data641ebe3244065) return
        if (data641ebe3244065.data.code != 1) {
          this.$message.info(data641ebe3244065.data.msg);
          return
        }



        uni.showToast({
          title: global.i18n.t('开票成功'),
          mask: true,
          icon: 'none',
          duration: 1500
        });
        this.popupShow1679650134928 = false;
        this.invoice_id = '';
        this.getOrderListFunc()
      },
      //订单-订单列表
      getOrderListFunc() {
        this.minixPagingListsApi = global.apiUrls.post62c8f31da5eaa;
        this.pageingListApiMethod = 'post';
        this.allowOnloadGetList = false;
        this.pagingListPostDataContent = {
          type: this.type,
          order_type: this.tabId
        }
        this.listData = [];
        this.dataList = this.listData;
        this.pagingListToggle();

      },
      //取消订单
      async cancelOrderFunc() {
        if (!validate(this.return_id, 'require')) {
          this.$message.info(global.i18n.t('请选择取消原因'));
          return false;
        }
        //请求方法
        //数据验证

        let data62cb8b8438141 = await this.$api.dbPost(global.apiUrls.post62cb8b8438141, {
          order_id: this.cancelId,
          return_id: this.return_id
        });
        if (!data62cb8b8438141) return
        if (data62cb8b8438141.data.code != 1) {
          this.$message.info(data62cb8b8438141.data.msg);
          return
        }



        this.popupShow1710992928520 = false;
        setTimeout(() => {
          uni.showToast({
            title: global.i18n.t('取消成功'),
            mask: true,
            icon: 'none',
            duration: 1500
          });
          this.getOrderListFunc()
        }, 300)
      },
      //获取取消订单id
      getCancelIDFunc(id) {
        this.return_id = '';
        this.cancelId = id;
        this.popupShow1679903057541 = true;
      },
      //订单-查询取消原因
      async queryCancelTypeFunc() {
        //请求方法
        //数据验证

        let datacancelType = await this.$api.get(global.apiUrls.post641ae6544d2d5, {
          type: '2',
          list_rows: '3'
        });

        if (datacancelType.data.code != 1) {
          this.$message.info(datacancelType.data.msg);
          return
        }
        let infocancelType = datacancelType.data;
        this.cancelType = infocancelType.data

      },
      //提醒发货
      async remindShipFunc(id) {
        //请求方法
        //数据验证

        let data62bec4f86725d = await this.$api.dbPost(global.apiUrls.post62bec4f86725d, {
          order_id: id
        });
        if (!data62bec4f86725d) return
        if (data62bec4f86725d.data.code != 1) {
          this.$message.info(data62bec4f86725d.data.msg);
          return
        }



        uni.showToast({
          title: global.i18n.t('提醒成功'),
          mask: true,
          icon: 'none',
          duration: 1500
        });
        this.getOrderListFunc()
      },
      //确认收货
      async confirmReceiptFunc(id) {
        //请求方法
        //数据验证

        let data64218bff49e61 = await this.$api.dbPost(global.apiUrls.post64218bff49e61, {
          order_id: id
        });
        if (!data64218bff49e61) return
        if (data64218bff49e61.data.code != 1) {
          this.$message.info(data64218bff49e61.data.msg);
          return
        }



        uni.showToast({
          title: global.i18n.t('收货成功'),
          mask: true,
          icon: 'none',
          duration: 1500
        });
        this.getOrderListFunc()
      },

      // //是否多包裹
      isMultiplePackagesFunc(type, orderId) {
        if (type == '1') {
          this.$urouter.navigateTo(`/pages/ddgl/packages/packages?order_id=${orderId}`);
        } else {
          this.$urouter.navigateTo(`/pages/ddgl/logisticsCheck/logisticsCheck?order_id=${orderId}`);
        }
      },
      //删除订单
      dltOrderFunc(id) {
        this.dltOrderId = id;
        this.popupShow1708479067655 = true;
      },

      // t延迟使用
      isdelay(id) {
        this.delayId = id;
        this.popupShow1714103974917 = true
      },
      async orderdelay() {

        let data64218bff49e61 = await this.$api.dbPost(global.apiUrls.post662a08e440476, {
          order_id: this.delayId
        });
        this.popupShow1714103974917 = false
        if (!data64218bff49e61) return
        if (data64218bff49e61.data.code != 1) {
          this.$message.info(data64218bff49e61.data.msg);
          return
        }
        uni.showToast({
          title: global.i18n.t('收货成功'),
          mask: true,
          icon: 'none',
          duration: 1500
        });
        this.getOrderListFunc()
      },
      //取消订单确认弹窗
      confirmationPopupFunc() {
        if (!validate(this.return_id, 'require')) {
          this.$message.info('请选择取消订单原因');
          return false;
        }
        this.popupShow1710992928520 = true;
        this.popupShow1679903057541 = false;
      },
      pagingListPostData() {
        return this.pagingListPostDataContent
      },
      //页面监听
      diyPageListen() {
        uni.$on('shenqingchengg', (data) => {
          this.getOrderListFunc()
        });
      },
      //注销页面监听
      diyOffPageListen() {
        uni.$off('shenqingchengg');
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: #F8F8F8;
    background-size: 100% auto;
  }

  .order_flex_0 {
    border-bottom: 1px solid rgba(230, 230, 230, 1);
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .order_fd0_1_c1 {
    color: rgba(153, 153, 153, 1);
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;
  }

  .order_fd0_1_c0 {
    color: #333333;
    font-size: 36rpx;
    font-weight: 500;
    line-height: 50rpx;

    .line {
      background-color: #B50E0E;
      width: 50rpx;
      height: 8rpx;
      border-radius: 4rpx;
      position: relative;
      left: 30%;
      top: 10rpx;
    }

    &.active {
      color: #B50E0E;
      font-size: 36rpx;
    }
  }

  .order_fd0_1 {
    width: 400rpx;
  }

  .order_fd0_0 {
    width: 100rpx;
    height: 88rpx;
  }

  .order_titlefd1_0_c8 {
    margin: 0rpx 24rpx 0rpx 0rpx;
  }

  .order_titlefd1_0_c4 {
    margin: 0rpx 52rpx 0rpx 0rpx;
  }

  .order_titlefd1_0_c3 {
    margin: 0rpx 52rpx 0rpx 24rpx;
  }

  .order_linefd1_0 {
    background: var(--benbenbgColor7);
    width: 40rpx;
    height: 8rpx;
    top: 80rpx;
    background-size: 100% auto !important;
    border-radius: 80rpx 80rpx 80rpx 80rpx;
  }

  .checkTitlefd1_0 {
    font-weight: 500 !important;
    font-size: 32rpx !important;
    color: #B50E0E !important;
    background-color: rgba(255, 255, 255, 1) !important;
  }

  ::v-deep .order_benbenTabsfd1_0 {
    background: #fff;
    width: 750rpx;
    height: 90rpx;
    white-space: nowrap;
    text-align: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
  }

  .order_flex_2 {
    padding: 24rpx 24rpx 0rpx 24rpx;
  }

  .order_fd2_0_c3_c3 {
    background: var(--benbenbgColor7);
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    font-size: 24rpx;
    color: #fff;
    width: 144rpx;
    height: 56rpx;
    line-height: 56rpx;
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .order_fd2_0_c3_c1 {
    background: var(--benbenbgColor5);
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    font-size: 24rpx;
    color: #333;
    width: 144rpx;
    height: 56rpx;
    line-height: 56rpx;
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .order_fd2_0_c3_c0 {
    background: var(--benbenbgColor5);
    border-radius: 28rpx 28rpx 28rpx 28rpx;
    font-size: 24rpx;
    color: #333;
    width: 144rpx;
    height: 56rpx;
    line-height: 56rpx;
  }

  .order_fd2_0_c3 {
    margin: 32rpx 0rpx 32rpx 0rpx;
  }

  .order_fd2_0_c2_c4 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    margin: 0rpx 11rpx 0rpx 0rpx;
  }

  .order_fd2_0_c2_c3 {
    margin: 0rpx 16rpx 0rpx 0rpx;
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #999999;
  }

  .order_fd2_0_c2_c1 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }

  .order_fd2_0_c2_c0_1 {
    border: 1px solid rgba(253, 81, 61, 1);
    margin: 0rpx auto 0rpx 0rpx;
    padding: 3rpx 6rpx 3rpx 6rpx;
    font-size: 24rpx;
    color: rgba(253, 81, 61, 1);
    border-radius: 8rpx;
  }

  .order_fd2_0_c2_c0 {
    margin: 0rpx auto 0rpx 0rpx;
    padding: 3rpx 6rpx 3rpx 6rpx;
    font-size: 28rpx;
    color: var(--benbenFontColor0);
    border-radius: 8rpx;
  }

  .order_fd2_0_c2 {
    border-top: 1px solid #eee;
    padding: 24rpx 0rpx 0rpx 0rpx;
    color: var(--benbenFontColor7);
  }

  .order_fd2_0_c1_c1_c2_c1_c0 {
    line-height: 33rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
  }

  .order_price2_fd2_0_c1_c1_c2_c0_c1 {
    font-size: 22rpx;
  }

  .order_price1_fd2_0_c1_c1_c2_c0_c1 {
    font-size: 32rpx;
  }

  .order_fd2_0_c1_c1_c2_c0_c1 {
    color: var(--benbenFontColor7);
    font-weight: 700;
    line-height: 40rpx;
    font-size: 22rpx;
  }

  .order_fd2_0_c1_c1_c2_c0_c0 {
    line-height: 40rpx;
    font-size: 22rpx;
    font-weight: 700;
    color: var(--benbenFontColor7);
  }

  .order_fd2_0_c1_c1_c2_c0 {
    color: var(--benbenFontColor7);
  }

  .order_fd2_0_c1_c1_c1 {
    border: 1px solid rgba(20, 195, 204, 1);
    background: rgba(20, 195, 204, 0.1);
    line-height: 42rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(20, 195, 204, 1);
    margin: 8rpx 0rpx auto 0rpx;
    width: 42rpx;
    height: 42rpx;
    text-align: center;
    background-size: 100% auto;
  }

  .order_fd2_0_c1_c1_c0 {
    line-height: 45rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: #333333;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .order_fd2_0_c1_c1 {
    margin: 0rpx 0rpx 0rpx 24rpx;
  }

  .order_fd2_0_c1_c0 {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .order_fd2_0_c1 {
    margin: 0rpx 0rpx 32rpx 0rpx;
  }

  .order_fd2_0_c0_c2_1 {
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor7);
  }

  .order_fd2_0_c0_c2 {
    line-height: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor7);
  }

  .order_fd2_0_c0_c1 {
    font-size: 28rpx;
    color: var(--benbenFontColor2);
    margin: 0rpx auto 0rpx 0rpx;
  }

  .order_fd2_0_c0_c0 {
    font-size: 28rpx;
    color: var(--benbenFontColor2);
  }

  .order_fd2_0_c0 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .order_fd2_0 {
    background: #fff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-size: 100% auto !important;
    padding: 0rpx 24rpx 0rpx 24rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .order_flex_3 {
    background: #fff;
    background-size: 100% auto !important;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .order_fd3_0_c2_c0_c0_c1 {
    width: 32rpx;
    height: 32rpx;
  }

  .order_fd3_0_c2_c0_c0 {
    padding: 20rpx 0rpx 20rpx 0rpx;
  }

  .order_fd3_0_c2 {
    touch-action: none;
    width: 686rpx;
    height: 40vh;
    margin: 0rpx auto 40rpx auto;
  }

  .order_fd3_0_c1_c0 {
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
    padding: 25rpx 24rpx 25rpx 24rpx;
  }

  .order_fd3_0_c1 {
    background: #F8F8F8;
  }

  .order_fd3_0_c0_c2 {
    font-size: 28rpx;
    font-weight: 700;
    color: var(--benbenFontColor7);
    line-height: 40rpx;
  }

  .order_fd3_0_c0_c1 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
  }

  .order_fd3_0_c0_c0 {
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    line-height: 40rpx;
  }

  .order_fd3_0_c0 {
    padding: 32rpx 32rpx 32rpx 32rpx;
  }

  .order_fd3_0 {
    border-radius: 24rpx 24rpx 0rpx 0rpx;
  }

  .order_fd4_0_c2_c1 {
    background: var(--benbenbgColor1);
    font-size: 32rpx;
    color: var(--benbenFontColor7);
    width: 270rpx;
    height: 101rpx;
    line-height: 101rpx;
    font-weight: 500;
    border-radius: 0rpx 0rpx 16rpx 0rpx;
  }

  .order_fd4_0_c2_c0 {
    border-right: 1px solid #eee;
    background: #fff;
    font-size: 32rpx;
    color: rgba(153, 153, 153, 1);
    width: 270rpx;
    height: 101rpx;
    line-height: 101rpx;
    font-weight: 400;
    border-radius: 0rpx 0rpx 0rpx 16rpx;
  }

  .order_fd4_0_c2 {
    border-top: 1px solid #eee;
    margin: 51rpx 0rpx 0rpx 0rpx;
  }

  .order_fd4_0_c1 {
    line-height: 44rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
    margin: 32rpx 40rpx 0rpx 40rpx;
  }

  .order_fd4_0_c0 {
    line-height: 44rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .order_fd4_0 {
    background: #fff;
    width: 540rpx;
    background-size: 100% auto !important;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .order_fd5_0_c2_c1 {
    background: var(--benbenbgColor1);
    font-size: 34rpx;
    color: var(--benbenFontColor7);
    width: 270rpx;
    height: 95rpx;
    line-height: 95rpx;
    font-weight: 400;
  }

  .order_fd5_0_c2_c0 {
    border-right: 1px solid #eee;
    background: #fff;
    font-size: 34rpx;
    color: #999999;
    width: 270rpx;
    height: 95rpx;
    line-height: 95rpx;
    font-weight: 400;
  }

  .order_fd5_0_c2 {
    border-top: 1px solid #eee;
    margin: 32rpx 0rpx 0rpx 0rpx;
    line-height: 95rpx;
  }

  .order_fd5_0_c1 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
    text-align: center;
    width: 448rpx;
    margin: 0rpx 0rpx 0rpx 40rpx;
  }

  .order_fd5_0_c0 {
    color: #333333;
    font-size: 36rpx;
    font-weight: 800;
    text-align: center;
    margin: 40rpx 0rpx 32rpx 0rpx;
  }

  .order_fd5_0 {
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    width: 540rpx;
  }

  .order_flex_6 {
    background: #fff;
    width: 540rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  .order_fd6_2_c1 {
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 16rpx 0rpx;
    font-size: 32rpx;
    color: var(--benbenFontColor7);
    font-weight: 500;
    width: 270rpx;
  }

  .order_fd6_2_c0 {
    border-top: 1px solid #eee;
    background: #fff;
    line-height: 110rpx;
    border-radius: 0rpx 0rpx 0rpx 16rpx;
    font-size: 32rpx;
    color: rgba(153, 153, 153, 1);
    font-weight: 500;
    width: 270rpx;
  }

  .order_fd6_2 {
    margin: 37rpx 0rpx 0rpx 0rpx;
  }

  .order_fd6_1 {
    line-height: 52rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 32rpx 0rpx 32rpx;
    text-align: center;
  }

  .order_fd6_0 {
    font-size: 36rpx;
    font-weight: 700;
    line-height: 32rpx;
    color: #333333;
    margin: 40rpx 0rpx 40rpx 0rpx;
  }
</style>
